<!--
 * @Author: ZHM zhuimin111@163.com
 * @Date: 2023-04-24 18:04:21
 * @LastEditors: LiSong
 * @LastEditTime: 2025-01-23 16:28:26
-->
<template>
	<el-drawer
		size="100%"
		class="operation-log"
		direction="rtl"
		append-to-body
		:show-close="false"
		:model-value="drawerVisible"
		:with-header="false"
	>
		<div class="operation-log-header">
			<span class="title-info">{{ props.title }}</span>
			<el-button type="danger" plain @click="handleClose">关闭</el-button>
		</div>
		<div class="operation-Log-container">
			<el-tabs v-model="activeName" class="operation-tabs">
				<el-tab-pane label="操作记录" name="first" style="height: 100%">
					<div class="operation-Log-tablebox">
						<rk-grid
							ref="tableRef"
							v-bind="tableOptions"
						>
							<template #process="{ row }">
								<div>
									<span v-if="row.prevTaskName != null">【{{ row.prevTaskName }}】</span>
									<span v-if="row.prevTaskAssignee != null">（{{ row.prevTaskAssignee }}）</span>
									<span v-if="row.prevTaskName != null"> -></span>
									<span class="tagName">【{{ row.currentTaskName }}】</span>
									<span v-if="row.assignee != null">（{{ row.assignee }}）</span>
									<span v-if="row.nextTaskName != null">->【{{ row.nextTaskName }}】</span>
									<span v-if="row.nextTaskAssignee != null">（{{ row.nextTaskAssignee }}）</span>
								</div>
							</template>
						</rk-grid>
					</div>
				</el-tab-pane>
				<el-tab-pane label="流程图" class="workflowImg-content" name="third">				 
						<div v-html="workflowImg"></div>					 
				</el-tab-pane>
			</el-tabs>
		</div>
	</el-drawer>
</template>
<script setup name="OperationLog">
import RkGrid from '@/components/rk-table'
import { ref, reactive, watch, nextTick, onBeforeMount } from 'vue';
import { ElDrawer, ElButton, ElTabs, ElTabPane } from 'element-plus'

import { useLogsApi } from '@/api';

const { getProcessImg } = useLogsApi();

const props = defineProps({
	// 标题
	title: { type: String, default: '操作记录' },
	// 参数
	params: { type: Object, default: () => {
		return {
			objectId: ''
		}
	} },
	// 是否展示
  visible: { type: Boolean, default: false },
	// 确定按钮
  onSubmit: Function,
  // 取消按钮
  onCancel: Function,
  // 提供给外部调用-销毁调用
  onDestory: Function
});

// tabs选项卡当前选中
const activeName = ref('first');

// 是否显示抽屉
const drawerVisible = ref(props.visible)

// 查询参数
const queryParams = reactive({
	objectId: props.params.objectId
})
// 日志表格的配置
const tableOptions = reactive({
	params: queryParams,
	method: 'get',
	dataUrl: '/task/operateRecord',
	columns: [
		{ field: 'actionTypeName', title: '类型', width: 100, align: 'center', headerAlign: 'center' },
		{ field: 'prevName', title: '任务过程', align: 'left', slots: { default: 'process' }, headerAlign: 'center' },
		{ field: 'startTime', title: '开始时间', width: 200, align: 'center', headerAlign: 'center' },
		{ field: 'endTime', title: '结束时间', width: 200, showHeaderOverflow: true, align: 'center', headerAlign: 'center' },
		{ field: 'opinion', title: '意见', showOverflow: true, headerAlign: 'center' },
	],
	autoLoad: false,
	boxConfig: false,
	pagerConfig: false,
})

// 工作流图片
const tableRef = ref(null)
const workflowImg = ref('');
/**
 * 获取工作流图片
 */
const setWorkflowImg = async () => {
	const result = await getProcessImg({
		objectId: queryParams.objectId
	});
	const { data, code, msg } = result;
	if (code === 200) { workflowImg.value = data }
};
/**
 * 监听参数objectId
 */
watch(
	() => queryParams.objectId,
	(newValue) => {
		if (newValue) {
			// 设置流程图
			setWorkflowImg()
			// 查询表格数据
			setTimeout(() => {
				nextTick(() => { tableRef.value.searchEvent() })
			}, 300);
		}
	},
	{ deep: true, immediate: true }
)

/**
 * 抽屉隐藏触发
 */
const drawerHide = () => {
	activeName.value = 'first';
	drawerVisible.value = false
	if (props.onDestory) { props.onDestory() }
}

/** 打开Drawer */
const handleOpen = (applyId) => {
	queryParams.objectId = applyId
	drawerVisible.value = true
}

/** 关闭Drawer */
const handleClose = () => {
	if (props.onCancel) { props.onCancel() }
	drawerHide()
}

defineExpose({
	handleOpen
})


</script>
<style lang="scss" scoped>
.operation-Log-container {
	padding: 20px;
	height: calc(100% - 50px);
}
.operation-log-header {
	width: 100%;
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid #ebeef5;
	background-color: #e3f2fe;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title-info {
		font-size: 18px;
	}
}
.workflowImg-content {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-x: auto;
	overflow-y: auto;
	flex-wrap: wrap;
}
.operation-tabs {
	display: flex;
	height: 100%;
}
.operation-Log-tablebox {
	height: 100%;
}
.tagName {
	color: rgb(236, 70, 70);
}
.operation-Log-note {
	width: 100%;
	display: flex;
	justify-content: left;
	margin-top: 20px;
}
.operation-note-content {
	width: 50%;
}
.operation-footer {
	float: right;
}
</style>
<style lang="scss">
.operation-log {
	.el-drawer__body {
		padding: 0;
	}
	.el-tabs__content {
		height: 100%;
	}
}
</style>
